<script setup lang="ts">
import { regApi } from "@/apis/user"
import LoginRegCard from "@/components/LoginView/LoginRegCard.vue"
import { ref } from "vue"

const cardStatus = ref("login")
// 获取到卡片组件
const cardRef = ref()
// 登录操作
const login = async () => {
  // 调用登录卡片的登录方法
  await cardRef.value.login()

}
// 注册
const regMehod = () => {
  cardStatus.value = "reg"
  cardRef.value.clearInput()
}
// 注册卡片传出的状态
const regStatus = (statu: string) => {
  cardStatus.value = statu
}
</script>

<template>
  <div class="bg-linear-to-r from-sky-500 to-indigo-500 w-full h-full flex justify-center items-center">
    <!-- 登录卡片 -->
    <LoginRegCard :card-status="cardStatus" @send-status="regStatus" ref="cardRef">
      <el-button type="primary" class="w-80 h-45" @click="login">登录</el-button>
      <el-button type="success" class="w-80 h-45 mt-3" @click="regMehod">注册</el-button>
    </LoginRegCard>
    <!-- 注册界面，当前状态为reg时候显示 -->
  </div>
</template>

<style scoped>
.el-button+.el-button {
  margin-left: 0;
}
</style>
